<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>jack</td>
          <td>lili</td>
          <td>tom</td>
        </tr>
      </tbody>
    </table>
    <script>
      // 保存当前正在编辑的单元格对象，如果为null单元格可以进入可编辑状态，反之不行。
      let curTag = null;
      let curTagHtml = "";
      document.onclick = function (e) {
        const target = e.target;
        const tagName = target.tagName;
        const action = target.dataset.action;
        // 只有点击单元格TD的时候才能执行的代码
        if (tagName === "TD" && curTag === null) {
          curTag = target;
          curTagHtml = target.innerHTML;
          // 使用字符串创建html，将会替换掉当前目标td中的内容
          const html = `
            <input type="text" id="curInput" value="${target.innerHTML}" />
            <button data-action="confirm">完成</button>
            <button data-action="cancel">取消</button>
          `;
          target.innerHTML = html;
        }
        // 确定
        if (action === "confirm") {
          // 1.td中的内容 设置为 input中的内容
          curTag.innerHTML = curInput.value;
          // 2. 设置 curTag=null 保证可以再一次替换td内容
          curTag = null;
        }
        // 取消
        if (action === "cancel") {
          curTag.innerHTML = curTagHtml;
          curTag = null;
        }
      };
    </script>
  </body>
</html>
